<template>
	<view class="Orderdetails">
		<view class="from">
			<view class="louis-font-center louis-40rpx">
				《{{infodata.fromname}}》
			</view>

			<view style="padding: 0rpx 40rpx;" class="louis-25rpx louis-space-between">
				<text>
				<text style="top: -7rpx;" class="louis-relative louis-icon-people louis-40rpx"> </text>
				{{infodata.expires_name}}</text>
				<text>
				<text style="top: 5rpx;" class="louis-relative louis-icon-shijian louis-40rpx"> </text>
				{{$u.timeFormat(infodata.expires_in, 'yy-mm-dd hh:MM')}}
				</text>
			</view>

			<view class="table">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
					<u-swipe-action :show="item.show" :index="index" v-for="(item, index) in infodata.list" :key="item.id" @click="click"
					 @open="open" :options="options">
						<view class="table-item louis-slide-bottom-1">
							<view @tap="itemshowdetails(index)" class="itemhear  louis-space-between">
								<view cl ass="louis-color-333">
									{{item.product}}
								</view>
								<view class="louis-end ">
									x{{item.count}}
									<text v-if="item.showdetails" class="louis-icon-right iconbottom icon"> </text><text v-else class="louis-icon-right icon">
									</text>
								</view>
							</view>
							<!-- 	<transition name="slide-fade"> -->
							<view v-if="item.showdetails" class="louis-slide-bottom-1">
								<u-line border-style="dashed"></u-line>
								<view class="louis-space-between  showdetails ">
									<text class="louis-color-W">
										单价:{{item.price}}</text>
									<text class="louis-color-D">总价:¥{{item.total}}</text>
								</view>
							</view>
							<!-- </transition> -->

						</view>
					</u-swipe-action>
				</scroll-view>

			</view>




		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				options: [{
						text: '编辑',
						style: {
							fontSize: "25rpx",
							backgroundColor: '#007aff'
						}
					},
					{
						text: '删除',
						style: {
							fontSize: "25rpx",
							backgroundColor: '#dd524d'
						}
					}
				],
				id: "",
				infodata: {
					expires_in: ""
				}
			};
		},
		onLoad(option) {
			this.id = option.id
			this.getinfo(option.id)
		},
		mounted() {

		},
		methods: {
			itemshowdetails(index) {
				this.infodata.list[index].showdetails = !this.infodata.list[index].showdetails
			},
			getinfo(id) {
				uniCloud.callFunction({
					data: {
						// openid: this.$store.state.vuex_openid,
						id: id
					},
					name: 'getOrderdetails'
				}).then((res) => {
					uni.hideLoading()
					console.log(res);
					this.infodata = res.result.data[0]
				}).catch((err) => {
					uni.hideLoading()

					console.error(err)
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.from {
		margin: 10rpx 15rpx;
		border-radius: 10rpx;
		background-color: #FFFFFF;
	}

	.Orderdetails {
		background-color: #f3f7fa;
		// /deep/ .u-swipe-action{
		// 	background-color: #f3f7fa !important;
		// }
	}

	.table {
		font-size: 25rpx;
		// border: 1px solid #2d72f5;
		// box-shadow: 5rpx 5rpx 2rpx #2d72f5;
		padding: 10rpx 20rpx;
		margin: 0rpx 10rpx;
		border-radius: 10rpx;
		// color:#FFFFFF;
		// /deep/ .u-swipe-del{
		// 	width: 100rpx !important;
		// }
	}

	.table-item {
		padding: 0rpx 10rpx;
		border-top: 1px solid #F3F7FA;
		padding-bottom: 10rpx 0rpx;

		.showdetails {
			padding: 10rpx 0rpx;
		}
	}

	.itemhear {
		padding: 10rpx 0rpx;

		.icon {
			color: #2d72f5;
			position: relative;
			top: 5rpx;
			left: 5rpx;
		}
	}
</style>
<style>
	page {
		background-color: #f3f7fa;
	}
</style>
